<template>
  <div class="base-panels">
    <anchorLink :links="links"></anchorLink>
    <section id="c1"><takeEffect></takeEffect></section>
    <section id="c2"><invalid></invalid></section>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { anchorLink } from "/@/components/linkComponent/index";
import { takeEffect, invalid } from "./limitItems";
export default defineComponent({
  components: {
    anchorLink , takeEffect , invalid
  },
  setup() {
    return {
      links: ref([{
        key: '#c1',
        title: '当前生效期内'
      },{
        key: '#c2',
        title: '已失效记录'
      }])
    }
  }
})
</script>

<style lang="less" scoped>
.types {
  display: flex;

  li {
    padding: 5px 10px;
    margin-right: 20px;
    font-size: 14px;
    line-height: 22px;
    color: #333;
    cursor: pointer;
    background: #F6F6F6;

    &.active {
      color: @white;
      background: #216DE5;
    }
  }
}
</style>
